import { useContext, useEffect, useRef } from 'react';
import { fabric } from 'fabric';

import styles from './index.module.less';
import EditorWorkspace from '../../core/EditorWorkspace';
import { Context } from '../../core/Context';

const Draw = () => {
  const { canvas, workspace, setState } = useContext(Context);
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const init = () => {
    const canvas = new fabric.Canvas(canvasRef.current, {
      fireRightClick: true,
      stopContextMenu: true,
      controlsAboveOverlay: true,
      preserveObjectStacking: true,
      width: containerRef.current?.offsetWidth,
      height: containerRef.current?.offsetHeight,
      selection: false,
    });

    const workspace = new EditorWorkspace(canvas, {
      
    });
    setState({ canvas, workspace });
  };

  useEffect(() => init(), []);

  return (
    <div ref={containerRef} className={styles.workspace}>
      <canvas ref={canvasRef} className={styles.editor} />
    </div>
  );
};

export default Draw;